<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>

<html>

<head>
    <script src="https://kit.fontawesome.com/3d703b7701.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <title>MyPetStore</title>
    <link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/order.css" type="text/css" media="screen"/>
</head>

<body>

<div class="Header">

    <div class="FirstFloor">
        <div class="Logo">
            <a href="mainForm"></a>
        </div>
        <div class="Search">
            <form action="searchProduct" method="post">
                <input type="text"  class="SearchTextField" name="keyword" size="14" autocomplete="off"/>
                <input type="submit" class="SearchButton" name="searchProducts" value="Search" />
                <div>
                <select class="DropDownBox" name="ways">
                    <option value="category">category</option>
                    <option value="product">product name</option>
                </select>
                </div>
            </form>

            <div class="SearchAutoCompleteDiv">
                <ul class="SearchAutoComplete"></ul>
            </div>

        </div>
    </div>


    <div class="SecondFloor">
        <c:if test="${sessionScope.loginAccount == null}">
            <div class="SignIn">
                <a href="loginRegister" class="beforeSignIn">Sign in <i class="fa-solid fa-right-to-bracket"></i></a>
            </div>
            <div class="Cart">
                <a href="cartForm" class="beforeSignIn">Shopping Cart <i class="fa-solid fa-cart-shopping"></i></a>
            </div>
            <div class="Problem">
                <a href="help.html" class="beforeSignIn"> Problem <i class="fa-regular fa-circle-question"></i></a>
            </div>
        </c:if>
        <c:if test="${sessionScope.loginAccount != null}">
            <div class="SignOut">
                <a href="signoutForm" class="afterSignIn">Sign Out <i class="fa-solid fa-right-from-bracket"></i></a>
            </div>
            <div class="MyAccount">
                <a href="myaccountForm" class="afterSignIn">My Account <i class="fa-solid fa-user"></i></a>
            </div>
            <div class="Cart">
                <a href="cartForm" class="afterSignIn">Shopping Cart <i class="fa-solid fa-cart-shopping"></i></a>
            </div>
            <div class="Problem">
                <a href="help.html" class="afterSignIn">Problem <i class="fa-regular fa-circle-question"></i></a>
            </div>
        </c:if>


    </div>

    <div class="ThirdFloor">
        <div class="FishLink">
            <a href="categoryForm?categoryId=FISH"><i class="fa-solid fa-fish-fins"></i> Fish</a><br/>
        </div>
        <div class="DogLink">
            <a href="categoryForm?categoryId=DOGS"><i class="fa-solid fa-dog"></i> Dogs</a><br/>
        </div>
        <div class="ReptileLink">
            <a href="categoryForm?categoryId=REPTILES"><i class="fa-solid fa-dragon"></i> Reptiles</a><br/>
        </div>
        <div class="CatLink">
            <a href="categoryForm?categoryId=CATS"><i class="fa-solid fa-cat"></i> Cats</a><br/>
        </div>
        <div class="BirdLink">
            <a href="categoryForm?categoryId=BIRDS"><i class="fa-solid fa-dove"></i> Birds</a><br/>
        </div>


    </div>



</div>


<div id="Content"><stripes:messages /></div>


